<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>template与v-for</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 筛选出state为0的元素 -->
  <div id="box">
    <ul>
      <!-- 当template 与v-for循环配合使用时,若循环内部含有v-if,则判断v-if条件是否成立,若成立则创建,否则不创建 -->
      <template v-for="item in dataList">
        <!-- 注意: 必须是在循环上添加,循环内部使用v-if才不会创造多余的节点 -->
        <li v-if="item.state===0">
          {{item.title}} {{item.state}}
        </li>
      </template>
      <!-- 错误写法 -->
      <!-- 这种错误写法实际上 不管循环时v-if是否成立,都会在页面上创建该dom,并渲染
            <li v-for="item in dataList">
            <template v-if="item.state===0">
                {{item.title}} {{item.state}}
            </template>
        </li> -->
    </ul>
  </div>
  <script>
    let obj = {
      data() {
        return {
          dataList: [
            { title: "手机", state: 0 },
            { title: "衣服", state: 1 },
            { title: "aaa", state: 2 },
            { title: "bbb", state: 1 },
            { title: "aaa", state: 2 },
            { title: "手机", state: 0 },
            { title: "ccc", state: 2 },
          ],
        };
      },
    };
    Vue.createApp(obj).mount("#box");
  </script>
</body>

</html>